<template>
    <view class="content" v-if="isShow">
        <u-swiper :list="list" border-radius="0" mode="number" indicator-pos="bottomRight" height="750"></u-swiper>
		
		<view class="box">
			<view class="title">{{data.belong}}</view>
			<view class="sub" v-if="data.content">{{data.content}}</view>
			<view class="top">
				<view class="price">￥<text class="price-num">{{data.price}}</text></view>
				<view class="line-price" v-if="data.material_price">￥{{data.material_price}}</view>
				<view class="sale">
					已售 {{ (data.diy_buy_count + data.buy_count) > 9999 ? parseInt((data.diy_buy_count + data.buy_count) / 10000) +'w+' : (data.diy_buy_count + data.buy_count) }}
				</view>
			</view>
		</view>
		<view class="line"></view>
		
		<template v-if="data.good_type == 2 && data.gift_sku">
			<view class="box">
				<view class="gift">
					<view class="gift-icon">赠</view>
					<view>赠送书籍</view>
				</view>
				<view class="gift-text" v-for="(item, index) in data.gift_sku" :key="index">
					<view class="gift-spot"></view>
					<view class="u-flex-1">{{item}}</view>
				</view>
			</view>
			<view class="line"></view>
		</template>
		
		<view class="box" v-if="data.good_type == 2 || data.evaluates_nums > 0">
			<template v-if="data.good_type == 2">
				<view class="tit">
					<view>课程目录</view>
					<view class="more" @click="$gTo(`/pages/goods/course?id=${id}`)">
						查看更多
						<u-icon name="arrow-right" color="#616161" size="26" class="u-m-l-5"></u-icon>
					</view>
				</view>
				<view class="sub-tit">
					共{{data.all_nums}}节<text class="year">·课程十年观看权</text>
				</view>
				<view class="scroll-box">
				    <scroll-view scroll-x @scroll="scroll" @scrolltoupper="scrolltoupper" :scroll-left="scrollLeft" :scroll-with-animation="true">
				        <view class="scroll">
				            <view class="scroll-goods" v-for="(item, index) in data.course_section" :key="index"
								 @click="$gTo(`/pages/goods/course?id=${id}`)">
								 
				                <view class="s-icon" v-if="item.price == 0">试看</view>
								<view class="s-tit">{{item.name}}</view>
								<view class="s-text" :class="{sActive : item.price == 0}">
									{{item.content}}
								</view>
				            </view>
				        </view>
				    </scroll-view>
				</view>
			</template>
			
			<template v-if="data.evaluates_nums > 0">
				<view class="tit">
					<view>用户评价</view>
					<view class="eva-num">（479条评价）</view>
					<view class="more" @click="$gTo(`/pages/goods/evaluate-list?id=${id}`)">
						查看更多
						<u-icon name="arrow-right" color="#616161" size="26" class="u-m-l-5"></u-icon>
					</view>
				</view>
				<view class="eva-item">
					<image src="../../static/icon/avatar.png" class="avatar"></image>
					<view class="u-flex-1">
						<view class="name">用户名</view>
						<view class="eva-text">星巴克 海盐焦糖馥芮白大杯星巴克 海盐焦糖馥芮白大杯 杯子很漂亮质量很好</view>
						<view class="eva-img">
							<image src="../../static/del/8.png" v-for="(el, ind) in 4" :key="ind"></image>
						</view>
						<view class="eva-time">2024-04-20 08:36</view>
					</view>
				</view>
			</template>
		</view>
		
		<view>
		    <view class="detail">
				<view class="line2"></view>
				<view class="title2">宝贝详情</view>
				<view class="line2"></view>
			</view>
		    <u-parse :html="data.goods_detail"></u-parse>
		</view>
		
		<view class="footer">
			<view class="f-item">
				<image src="../../static/icon/kefu.png" class="d-icon"></image>
				<view>客服</view>
			</view>
			
			<!-- #ifdef MP-WEIXIN -->
			<button type="default" open-type="share" class="share-button">
				<image src="../../static/icon/share.png" class="d-icon"></image>
				<view class="share-text">分享</view>
			</button>
			<!-- #endif -->
			
			<!-- #ifdef  MP-TOUTIAO -->
			<view class="f-item">
				<image src="../../static/icon/share.png" class="d-icon"></image>
				<view>分享</view>
			</view>
			<!-- #endif -->
			
			<view class="f-item" @click="$sTo(`/pages/tabbar/cart`)">
				<view class="c-num" v-if="data.buycar_count > 0">{{data.buycar_count}}</view>
				<image src="../../static/icon/cart.png" class="d-icon"></image>
				<view>购物车</view>
			</view>
			<view class="f-btn" @click="buy">加入购物车</view>
			<view class="f-btn f-buy" @click="buy">立即购买</view>
		</view>
		
		<!-- 选择数量、规格弹窗 -->
		<u-popup v-model="show" :round="true" mode="bottom" closeable="true" width="750rpx" height="850rpx" border-radius="14">
		    <view class="u-rela">
		        <view class="store-box">
		            <view class="store-box-up">
		                <image class="img" :src="popImg"></image>
		                <view class="store-text">
		                    <view class="u-font-30 text-bold u-line-2 u-p-t-40">
								{{data.belong}}
							</view>
		                    <!-- <view class="kucun">库存{{stock}}</view> -->
		                    <view class="price u-p-t-20">
								￥<text class="price-num">{{money2}}</text>
							</view>
		                </view>
		            </view>
		            <scroll-view scroll-y="true" style="height: 340rpx;">
		                <view class="ortx">
		                    <view class="o_tix">规格</view>
		                    <view class="cokn">
		                        <view class="con_item" v-for="(nItem, indexs) in data.goods_list" :key="indexs" 
		                            :class="{ on: nItem.checked }" @click.stop="chooseSku(nItem)">
		                            {{ nItem.sku_name }}
		                        </view>
		                    </view>
		                </view>
		            </scroll-view>
		            <view class="numxd">
		                <view class="okx">购买数量</view>
		                <u-number-box :disabled-input="true" v-model="numx" :min="1" @change="changeNum"></u-number-box>
		            </view>
		        </view>
		        <view class="store-btn-box">
		            <view class="store-btn" @click.stop="toCar">加入购物车</view>
		            <view class="store-btn2" @click.stop="doBuy">立即购买</view>
		        </view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
				id: '', //商品id
				good_type: '',
				data: {}, //商品信息
				isShow: false,
				show: false, //选择数量弹窗
				numx: 1, //选择数量
				// sku_array: [],//商品规格数组
				money2: 0, //弹窗展示时的价格
				popImg: '', //弹窗中 商品图片
				// stock: 0,
				// chooseNum: 0, // 规格选择数量
				// skuName: '', // 规格名称
				// skuID: 0, // 规格id
				// stockShow: true, //库存不足
				// iel: '',//选中规格的索引
            };
        },
        onShareAppMessage(res) {
        	return {
                title: this.data.goods_name,
                imageUrl: this.data.image_uri,
                path: '/pages/goods/goods-details?id=' + this.id + '&parentID=' + _this.$getSync('userId')
        	}
        },
        onShareTimeline(){
            let _this = this
            return {
            	title: this.data.goods_name,
            	imageUrl: this.data.image_uri,
            	path: '/pages/goods/goods-details?id=' + this.id + '&parentID=' + _this.$getSync('userId')
            }
        },
        
        onLoad(option) {
			// 分享
			if (option.parentID) {
			    uni.setStorageSync('parentID', option.parentID);
			}
			
            if(option.id) {
                this.id = option.id
            }
			if(option.good_type) {
			    this.good_type = option.good_type
			}
            this.getData()
        },
        methods: {
			//加入购物车、立即购买
			buy() {
			    if(!this.$getSync('userToken')){
			    	this.$confirm('请先登录并绑定手机号',()=>{
			    	    uni.navigateTo({
			    	        url: '/pages/login/login'
			    	    });
			    	})
			    } else if (!this.$getSync('MOBILE')){
			    	this.$confirm('请先绑定手机号',()=>{
			    	    uni.navigateTo({
			    	        url: '/pages/login/login?show=1'
			    	    });
			    	})
			    } else {
			        this.show = true;
			    }
			},
			
			//立即购买
			doBuy() {
				let ware_id = '', sku_id = '', goods_id = ''
				if (this.data && this.data.goods_list && this.data.goods_list.length > 0) {
					this.data.goods_list.forEach(cur => {
						if (cur.checked) {
							ware_id = cur.ware_id
							sku_id = cur.id
							goods_id = cur.goods_id
						}
					})
				}
				if (!ware_id) {
					this.$toast('请选择规格');
					return
				}
				
				var goods = []
				var obj = {
					ware_id: ware_id,
					goods_id: goods_id,//商品id
					sku_id: sku_id,//规格id			
					goods_nums: this.numx,//商品数量	
				}
				goods.push(obj)
			    
				this.$ajax('orders/confirmOrder', {
					userToken: this.$getSync('userToken'),
					buy_id: '' , //购物车编号，逗号分隔
			        goods: goods,//[ware_id,goods_id,sku_id,goods_nums]
				}).then(ret => {
					if (ret.status == 0) {
			            this.show = false;
			            this.$gTo('/pages/settlement/settlement?data=' + JSON.stringify(ret.data))
					} else {
						this.$toast(ret.message)
					}
				})
			},
			
			//加入购物车
			toCar() {
				let ware_id = '', sku_id = ''
				if (this.data && this.data.goods_list && this.data.goods_list.length > 0) {
					this.data.goods_list.forEach(cur => {
						if (cur.checked) {
							ware_id = cur.ware_id
							sku_id = cur.id
						}
					})
				}
				if (!ware_id) {
					this.$toast('请选择规格');
					return
				}
			    
			    this.$ajax('orders/addCar', {
			        userToken: this.$getSync('userToken'),
			        ware_id: ware_id,
			        sku_id: sku_id,//规格id
			        goods_nums: this.numx,//商品数量
			    }).then(ret => {
			        if (ret.status == 0) {
			            this.$toast('加入成功');
						
			            setTimeout(()=> {
			            	this.show = false
			            	this.numx = 1
			            	if (this.data && this.data.goods_list && this.data.goods_list.length > 0) {
			            		this.data.goods_list.forEach((cur, index) => {
			            			if (index == 0) {
			            				this.$set(cur, 'checked', true)
										this.money2 = cur.sale_price; // 弹窗展示时的价格
										this.popImg = cur.imgurl; //弹窗中 商品图片
			            			} else {
			            				this.$set(cur, 'checked', false)
			            			}
			            		})
			            	}
			            }, 500)
			        } else {
			            this.$toast(ret.message);
			        }
			    });
			},
			           
			// 选择数量
			changeNum(e) {
			    console.log('e',e)
			    this.numx = e.value
			},
			
			//选择规格
			chooseSku(item) {
				this.money2 = item.sale_price; //价格
				this.popImg = item.imgurl; //弹窗中 商品图片
				
				const nowStatu = item.checked
				this.data.goods_list.forEach(el => {
				    el.checked = false;
				})
				item.checked =! nowStatu
			},
			
			//获取商品详情
			getData() {
				this.$ajax('applets/wareDetail', {
					userToken: this.$getSync('userToken'),
					ware_id: this.id, //商品id
					good_type: this.good_type,//实物商品1多规格 ，课程视频2 单规格
				}).then(ret => {
					if (ret.status == 0) {
			            this.data = ret.data;
						// 轮播图
						if (ret.data.goods_album_detail.length > 0) {
							ret.data.goods_album_detail.forEach((cur) => {
								this.list.push({
									image: cur.value
								})
							})
						}
						// 规格
						if (this.data && this.data.goods_list && this.data.goods_list.length > 0) {
							this.data.goods_list.forEach((cur, index) => {
								if (index == 0) {
									this.$set(cur, 'checked', true)
									this.money2 = cur.sale_price; // 弹窗展示时的价格
									this.popImg = cur.imgurl; //弹窗中 商品图片
								} else {
									this.$set(cur, 'checked', false)
								}
							})
						}
						
						if (ret.data.gift_sku) {
							this.data.gift_sku = ret.data.gift_sku.split('、')
							console.log(this.data.gift_sku)
						}
						
						this.isShow = true;
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	
	
	
	
	
	
	
	
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding-bottom: 70px;
	}
	.line{
		width: 750rpx;
		height: 20rpx;
		background-color: #f4f6fa;
	}
	.box{
		background-color: #fff;
		padding: 30rpx 20rpx;
	}
	.title{
		font-size: 36rpx;
		font-weight: bold;
		white-space: pre-line;
		word-break: break-all;
	}
	.sub{
		font-size: 26rpx;
		color: #999ca7;
		white-space: pre-line;
		word-break: break-all;
		padding-top: 15rpx;
	}
	.top{
		padding-top: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.price{
		font-size: 34rpx;
		color: #fd463e;
		padding-right: 15rpx;
	}
	.price-num{
		font-size: 54rpx;
	}
	.line-price{
		flex: 1;
		font-size: 24rpx;
		color: #6a6e7e;
		text-decoration: line-through;
	}
	.sale{
		font-size: 24rpx;
		color: #2658aa;
		padding: 6rpx 8rpx;
		background-color: #eaf2ff;
		border-radius: 8rpx;
	}
	
	
	.gift{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.gift-icon{
		width: 32rpx;
		height: 32rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 32rpx;
		background-color: #fe4a26;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}
	.gift-text{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 15rpx;
		font-size: 26rpx;
		color: #7d7d7d;
	}
	.gift-spot{
		width: 8rpx;
		height: 8rpx;
		background-color: #7d7d7d;
		border-radius: 50%;
		margin-right: 15rpx;
	}
	
	.tit{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.eva-num{
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		flex: 1;
	}
	.more{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: normal;
		color: #616161;
	}
	.sub-tit{
		font-size: 24rpx;
		padding-top: 15rpx;
		padding-bottom: 40rpx;
	}
	.year{
		color: #999999;
	}
	
	.scroll-box{
	    width: 750rpx;
	    height: 190rpx;
	    white-space: nowrap;
		padding-right: 20rpx;
		margin-bottom: 60rpx;
	}
	.scroll{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.scroll-goods{
	    width: 270rpx;
	    height: 190rpx;
		background-color: #f7f8fa;
		padding: 25rpx 20rpx;
		border-radius: 10rpx;
		margin-right: 18rpx;
		position: relative;
	}
	.s-icon{
		width: 67rpx;
		height: 36rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
		background-color: #f76d0a;
		border-radius: 0 10rpx 0 10rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.s-tit{
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 25rpx;
	}
	.s-text{
		width: 230rpx;
		height: 64rpx;
		font-size: 26rpx;
		color: #6e6f71;
		line-height: 32rpx;
		white-space: pre-line;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.sActive{
		color: #f76d0a;
	}
	
	
	.eva-item{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 30rpx;
	}
	.avatar{
		width: 73rpx;
		height: 73rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
		white-space: pre-line;
		word-break: break-all;
	}
	.eva-text{
		font-size: 26rpx;
		white-space: pre-line;
		word-break: break-all;
		padding-top: 10rpx;
	}
	.eva-img{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.eva-img>image{
		width: 184rpx;
		height: 184rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
	}
	.eva-time{
		font-size: 24rpx;
		padding-top: 30rpx;
	}
	
	.detail{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 25rpx 0;
	}
	.line2{
		width: 86rpx;
		height: 2rpx;
		background-color: #e5e5e5;
	}
	.title2{
	    font-size: 24rpx;
		color: #5c5c5c;
		padding: 0 20rpx;
	}
	
	
	.footer{
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.share-button {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    margin: 0;
		padding: 0;
	    background-color: #fff !important;
	    
	    &:after {
	        border: none;
	    }
	}
	.share-text {
	    font-size: 22rpx;
		color: #696969;
		line-height: 1.5;
	}
	
	.f-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #696969;
		padding: 0 20rpx;
		position: relative;
	}
	.d-icon{
		width: 37rpx;
		height: 37rpx;
	}
	.c-num{
		font-size: 20rpx;
		color: #f62a2a;
		background-color: #fff;
		border: 2rpx solid #f62a2a;
		padding: 4rpx 8rpx;
		border-radius: 50%;
		position: absolute;
		top: -8rpx;
		right: 8rpx;
		z-index: 1;
	}
	.f-btn{
		font-size: 28rpx;
		color: #fff;
		padding: 16rpx 24rpx;
		margin-left: 10rpx;
		border-radius: 50rpx;
		background-color: #f76d0a;
	}
	.f-buy{
		padding: 16rpx 40rpx;
		background-color: #2558ab;
	}
	
	
	// 选择数量弹窗
	.store-box {
	    padding: 10rpx 20rpx 30rpx;
	    // height: 650rpx;
	    overflow-y: auto;
	
	    .store-box-up {
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        padding-bottom: 20rpx;
	        border-bottom: 2rpx solid #e6e6e6;
	        padding-top: 20rpx;
	    }
	    .index-icon-30 {
	        width: 33rpx;
	        height: 33rpx;
	    }
	    .img {
	        width: 210rpx;
	        height: 210rpx;
	        border-radius: 15rpx;
	    }
	    .store-text {
	        width: 64vw;
	        // margin-right: 70rpx;
	    }
	}
	.numxd {
	    display: flex;
	    justify-content: space-between;
	    height: 50rpx;
	    margin-top: 35rpx;
	    .okx {
	        font-size: 30rpx;
	        line-height: 50rpx;
	    }
	}
	.store-btn-box {
	    background-color: #ffffff;
	    position: fixed;
	    bottom: 0;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    .store-btn {
	        margin: 10rpx 20rpx 30rpx 30rpx;
	        padding: 25rpx 0;
	        width: 45vw;
			background-color: #f76d0a;
	        border-radius: 50rpx;
	        font-size: 34rpx;
	        text-align: center;
	        color: #ffffff;
	    }
	    .store-btn2{
	        margin: 10rpx 30rpx 30rpx 0;
	        padding: 25rpx 0;
	        width: 45vw;
	        background-color: #2558ab;
	        border-radius: 50rpx;
	        font-size: 34rpx;
	        text-align: center;
	        color: #ffffff;
	    }
	    
	    .store-btn-3{
	        margin: 10rpx 20rpx 30rpx 30rpx;
	        padding: 25rpx 0;
	        width: 45vw;
	        background-color: #acacac;
	        border-radius: 50rpx;
	        font-size: 34rpx;
	        text-align: center;
	        color: #fff;
	    }
	    .store-btn2-3{
	        margin: 10rpx 30rpx 30rpx 0;
	        padding: 25rpx 0;
	        width: 45vw;
	        background-color: #acacac;
	        border-radius: 50rpx;
	        font-size: 34rpx;
	        text-align: center;
	        color: #fff;
	    }
	}
	
	.ortx {
	    width: 100%;
	    
	}
	.o_tix {
	    width: 100%;
	    height: 82rpx;
	    line-height: 82rpx;
	    font-size: 30rpx;
	    color: #202020;
	}
	.cokn {
	    display: flex;
	    flex-wrap: wrap;
	    margin-left: -20rpx;
	    .con_item {
	        font-size: 26rpx;
	        padding: 15rpx 44rpx;
	        background: #f4f4f4;
	        border-radius: 10rpx;
	        margin-left: 20rpx;
	        margin-bottom: 16rpx;
	        
	        &.on {
	            color: #2558ab;
	            border: 2rpx solid #2558ab;
	            box-sizing: border-box;
	        }
	    }
	}

</style>
